<template>
	<view class="container">
		<button class="add" type="primary" size="mini"  @click="add_goods">添加商品</button>
		<view class="table">
			<scroll-view class="scroll" scroll-y="true" scroll-x="true" >
				<view class="head">
					<view class="head-item">商品名称</view>
					<view class="head-item">商品ID</view>
					<!-- <view class="head-item">商品信息编号</view> -->
					<view class="head-item">商品折扣</view>
					<view class="head-item">单价</view>
					<!-- <view class="head-item">状态</view> -->
					<view class="head-item">分类</view>
					<view class="head-item"></view>
				</view>
				<view class="list" v-for="(item,index) in goods" :key='index'>
					<view class="list-item">{{item.spmc}}</view>
					<view class="list-item">{{item.goodsID}}</view>
					<!-- <view class="list-item">{{item.spxxbh}}</view> -->
					<view class="list-item">{{item.spzk}}</view>
					<view class="list-item">{{item.spdj}}元</view>
					<!-- <view class="list-item">出售中</view> -->
					<view class="list-item">{{item.sptype}}</view>
					<view class="special">
						<button class="mini-btn" type="primary" size="mini" @click="edit_goods(item)">编辑</button>
						<button class="mini-btn" type="warn" size="mini" @click="delete_goods(item.goodsID)">删除</button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default{
		data(){
			return{
				
			}
		},
		computed: {
		  ...mapState(['userInformation',]),
		  ...mapGetters(['goods'])
		},
		async onLoad() {
			console.log('goods',this.goods)
		},
		methods:{
			add_goods(){
				uni.navigateTo({
					url:'/pages/addGoods/addGoods'
				})
			},
			async delete_goods(id){
				console.log('delete_goods',id)
				uni.showModal({
				    title: '提示',
				    content: '您确定要删除吗',
				    success: (res)=> {
						console.log(res)
				        if (res.confirm) {
				            console.log('用户点击确定');
							
							this.$request({
								url:'/deletespxx/'+id
							}).then((res)=>{
								console.log('res',res)
								this.$store.dispatch('get_goods')
								this.$store.commit('delete_item',id)
							})
				        }
				    }
				})
				
				/* let result = await this.$request({
					url:'/supermarket/deletespxx/'+id
				})
				console.log('result',result)
				this.$store.dispatch('getGoods') */
			},
			
			edit_goods(info){
				// console.log('info',JSON.parse(JSON.stringify(info)))
				console.log('info',info)
				// console.log('info',JSON.stringify(info))
				uni.navigateTo({
					// url:'/pages/editGoods/editGoods?information='+JSON.stringify(info) //info是一个对象
					url:'/pages/editGoods/editGoods?goodsID='+info.goodsID+'&spmc='+info.spmc+'&spdj='+info.spdj+'&spzk='+info.spzk+'&sptpcflj='+info.sptpcflj+'&sptype='+info.sptype   
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.add{
			margin-left: 15rpx;
			margin-top: 10rpx;
		}
	.table{
		// border: 1rpx solid #f00;
		padding: 10rpx;
		// margin-top: 10rpx;
		.scroll{
			white-space: nowrap;
			// border: 1rpx solid #bbb;
			// padding: 0 50rpx;
		}
	}
	.head{
		display: flex;
		flex-direction: row;
		// width: 210%;
		width: 180%;
		// border: 1rpx solid #f00;
		.head-item{
			width: 30%;
			flex-grow: 1;
			text-align: center;
			background-color: #F5f5f5;
			color: gray;
			// border: 1rpx solid #B2B2B2;
			line-height: 70upx;
		}
	}
	
	
	.list{
		display: flex;
		flex-direction: row;
		// width: 210%;
		width: 180%;
		// margin:20rpx 0rpx;
		// border-bottom: 1rpx solid #f00;
		.list-item{
			// flex-grow: 1;
			width: 30%;
			text-align: center;
			line-height: 60upx;
			border-bottom: 1upx solid #b2b2b2;
			// border: 1rpx solid #f00;
		}
		.special{
			// border: 1rpx solid #f00;
			width: 30%;
			display: flex;
			align-items: center;
		}
		button{
			text-align: center;
			font-size: 20rpx;
			// border: 1rpx solid #f00;
		}
	}
	
</style>
